<template>
  <div class="user-head">
    <div :class="headClass">
      <img :src="user.avatar || defaultHead"
        :alt="user.nick"
        :title="user.nick"/>
    </div>
    <div v-if="showState"
      :class="stateClass"
      @click.stop.prevent="bindStateClick($event)">
    </div>
    <ul v-if="showState" class="user-head__state-list" id="userStateContent">
      <li class="user-head__state__online" @click.stop.prevent="selectStateClick(0)">在线</li>
      <li class="user-head__state__leave" @click.stop.prevent="selectStateClick(4)">离开</li>
      <li class="user-head__state__hide" @click.stop.prevent="selectStateClick(1)">隐身</li>
      <li class="user-head__state__busy" @click.stop.prevent="selectStateClick(3)">忙碌</li>
      <!-- <li class="user-head__state__game" data-state="5">游戏中</li> -->
    </ul>
  </div>
</template>

<script>
import defaultHead from './img/avatar-default.png'
import { STATE_VALUE } from '@/common/const'

export default {
  name: 'user-head',
  props: {
    defaultHead: defaultHead,
    user: {
      type: Object,
      required: false,
      default: () => ({ avatar: defaultHead, nick: '', state: 4 })
    },
    showState: {
      type: Boolean,
      required: false,
      default: true
    },
    size: {
      type: Number,
      required: false,
      default: 66
    }
  },
  computed: {
    headClass () {
      var css = { 'img66': true }
      switch (this.size) {
        case 66: css = { 'img66': true }; break
        case 88: css = { 'img88': true }; break
        case 28: css = { 'img28': true }; break
      }
      return Object.assign({}, { 'user-head__avater': true }, css)
    },
    stateClass () {
      var css = { 'user-head__state__leave': true }
      switch (this.user.state) {
        case STATE_VALUE.ONLINE: css = { 'user-head__state__online': true }; break
        case STATE_VALUE.LEAVE: css = { 'user-head__state__leave': true }; break
        case STATE_VALUE.HIDE: css = { 'user-head__state__hide': true }; break
        case STATE_VALUE.BUSY: css = { 'user-head__state__busy': true }; break
        case STATE_VALUE.GAME: css = { 'user-head__state__game': true }; break
      }
      return Object.assign({}, { 'user-head__state': true }, css)
    }
  },
  created () {
  },
  methods: {
    bindStateClick (e) {
      $('#userStateContent').toggle()
    },
    selectStateClick (state) {
      $('#userStateContent').hide()
    }
  },
  watch: {
  }
}
</script>

<style lang="scss">
@import "~@/css/common/_variables";
@import "~@/css/lib/_mixin";

.user-head {
  position: relative;
  &__avater {
    border-radius: 100%;
    align-self: center;
    img {
      border-radius: 100%;
    }
  }
  .img66 {
    width: 66px;
    height: 66px;
    border: 3px solid $color-base;
    img {
      width: 60px;
      height: 60px;
    }
  }
  .img28 {
    width: 28px;
    height: 28px;
    border: 2px solid $color-base;
    img {
      width: 24px;
      height: 24px;
    }
  }
  .img88 {
    width: 88px;
    height: 88px;
    border: 3px solid $color-base;
    img {
      width: 82px;
      height: 82px;
    }
  }
  &__state {
    position: absolute;
    cursor: pointer;
    bottom: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 1;
    :hover {
      opacity: 1;
    }
    &__online {
      background: #43b581;
      ::before {
        background: #43b581;
      }
    }
    &__leave {
      background: #faa61a;
      ::before {
        background: #faa61a;
      }
    }
    &__hide {
      background: #747f8d;
      ::before {
        background: #747f8d;
      }
    }
    &__busy {
      background: #f04747;
      ::before {
        background: #f04747;
      }
    }
    &__game {
      background: #7289da;
      ::before {
        background: #7289da;
      }
    }
  }
  &__state-list {
    position: absolute;
    width:108px;
    bottom: -110px;
    right: -108px;
    z-index: 999;
    display: none;
    border-radius: 4px;
    background: #fff;
    overflow-y: auto;
    display: none;
    li {
      position: relative;
      height: 28px;
      line-height: 27px;
      padding: 0 10px 0 38px;
      font-size: 14px;
      color: #72767d;
      cursor: pointer;
      border-radius: 2px;
      -webkit-transition:all .1s ease 0s;
      transition:all .1s ease 0s;
    }
    li::before {
      content:'';
      width: 12px;
      height: 12px;
      border-radius: 12px;
      top: 8px;
      left: 10px;
      position:absolute;
    }
  }
}
</style>
